<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model"  />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @grid-data-change="e => $bus.$emit('sku_map_manage/thirdPartyList', e)">
    </ex_super_table_page>
    <ex_super_dialog_form ref="detailDialog" v-bind="detailDialog">

    </ex_super_dialog_form>
  </div>
</template>
<script>
import page_table_model_manage from '@/mixin/page_table_model_manage';
import business_function from "@/common/business_function"

import superTablePageFunction from '@/mixin/super-table-page-function';
export default {
  title: 'label_thirdParty_authorized',
  mixins: [superTablePageFunction, page_table_model_manage,],
  components: {},
  data() {
    return {
      selection: [],
      apiStructure: {
        DEFAULT: {
          sellerId: {
            label: 'ClientID', i18n: false,
          },
          apiKeys: {
            label: "label_secret_key",
          },
        },
        OZON: {
          sellerId: {
            label: 'ClientID', i18n: false,

          },
          apiKeys: {
            label: "label_secret_key",
          },
          checkRule: {
          },
        },
        WILDBERRIES: {
          sellerId: {
            label: "label_platform_store",
          },
          apiKeys: {
            label: 'Token', i18n: false,
          },
        },
        ALIBABA_PO: {
          sellerId: {
            label: "label_platform_account",
          },
          apiKeys: {
            label: 'Token', i18n: false,
          },
        },
        AMAZON: {
          amazonRegionType: {
            label: "区域",
          },
          sellerId: {
            label: "ClientID",
          },
          apiKeys: {
            label: 'Token', i18n: false,
          },

        },
      },
      option: {
        search: {
       
          model: [
          
            { label: "label_customer", key: "customerId", type: 'common_customer_choose' },
           
            {
              label: "label_authorized_platform", key: "platformCode", type: 'select', enum: 'ApiPlatformEnum',
            },
          
          ],
        },
        actionExtra: [
        
          {
            label: 'label_export', click: this.exportExcel
          },
          
        ],
        table: {
          url: "/ums-api/customer/ThirdPartyAuthorizedRpc/getCustomerAuthorizedList.json",
          defaultColAttr: {},
          model: this.init_table_model(),

        },
      },

      detailDialog: {
        customClass: 'dialog_big',
        noSubmit: true,
        detailUrl: '/ums-api/customer/ThirdPartyAuthorizedRpc/getCustomerDetail.json',
        form: {
          itemClass: "", inputClass: "w_fill",
          // formClass: "el_form_row",
          model: [
            {
              key: "rows", formType: "itemTable", height: 500,
              model: [
                {
                  key: 'platformCode', label: 'label_platform_info', 'width': 140, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => this.$enumShow(v, "ApiPlatformEnum")
                },
                { key: 'status', label: 'label_status', 'width': 140, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "UmsThirdPartyAuthorizedStatusEnum") },
                {
                  key: 'businessType', label: 'label_business_type', 'width': 150,
                  render: (h, scope) => this.$renderText(h, scope, { enum: "UmsThirdPartyAuthorizedTypeEnum" })
                },
                {
                  key: 'info', label: "label_authorize_info", 'min-width': 300, attrs: { align: 'left' },
                  render: (h, { row, }) => {
                    const structure = this.apiStructure[row.platformCode] ? this.apiStructure[row.platformCode] : this.apiStructure.DEFAULT
                    return (<div>
                      <div>{structure['sellerId'].i18n == false ? structure['sellerId'].label : this.$tt(structure['sellerId'].label)} : {row['sellerId']}</div>
                      <div>{structure['apiKeys'].i18n == false ? structure['apiKeys'].label : this.$tt(structure['apiKeys'].label)} : {row['apiKeys']}</div>
                    </div>)
                  }
                },
              ]
            },



          ],

        }
      },
    };
  },

  methods: {
    option_table_model() {
      return [
        { key: 'customerName', label: 'label_customer', 'width': 150, },
        {
          key: 'platformCodes', label: 'label_authorized_platform', 'min-width': 150,
          render: (h, { row, column }) => {
            let value = row[column.property]
            if (value) {
              value = value.split(',').filter(it => it)
            }
            if (!_.isEmpty(value)) {
              return (<div>
                {value.map(it => (<el-tag class="mg_r1 mg_v1">{this.$enumShow(it, "ApiPlatformEnum")}</el-tag>))}
              </div>)
            } else {
              return this.$renderText(h, null,)
            }
          }
        },
        {
          type: 'operate', width: 160,
          operate: [
            {
              label: 'label_view_detail', click: (row) => this.$refs.detailDialog.showNew({
                title: this.$t("label_authorized_detail") + "： " + row.customerName,
                params: { customerId: row.customerId },
              })
            },
          ]
        }
      ]
    },
    exportExcel() {
      business_function.confirmOperateBaseSelectOrForm.call(this, {
        data: this.$refs.SuperTablePage.getSearchFormData(),
        model: this.option.search.model,
        callback: (selection, data) => {
          let params = {}
          if (!_.isEmpty(selection)) {
            params = {
              idList: selection.map(it => it.id)
            }
          } else {
            params = data
          }
          this.$functionCommon({
            url: "/ums-api/customer/ThirdPartyAuthorizedRpc/export.json",
            data: params,
          })
        }
      })
    },
  }
};

</script>
<style></style>
